import React, { useState } from 'react'
import { Layout, Dropdown, Menu, Avatar } from 'antd'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from '@ant-design/icons'
const { Header } = Layout
export default function TopHeader() {
  const [collapsed, setCollapsed] = useState(false)
  const handleCollapsed = () => {
    setCollapsed(!collapsed)
  }
  const menu = (
    <Menu>
      <Menu.Item>111</Menu.Item>
      <Menu.Item>222</Menu.Item>
      <Menu.Item>333</Menu.Item>
      <Menu.Item danger>退出</Menu.Item>
    </Menu>
  )
  return (
    <Header
      className="site-layout-background"
      style={{ padding: '0 16px', margin: '24px 16px' }}
    >
      {collapsed ? (
        <MenuUnfoldOutlined onClick={handleCollapsed}></MenuUnfoldOutlined>
      ) : (
        <MenuFoldOutlined onClick={handleCollapsed}></MenuFoldOutlined>
      )}
      <div style={{ float: 'right' }}>
        <span>欢迎admin回来</span>
        <Dropdown overlay={menu}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}
